<template>
    <div class="treeBox">
        <div
            class="treeLeft treeItem"
            style="width: 25%"
            :style="{ height: hHeight - 156 + 'px' }"
        >
            <el-input
                v-model="filterText"
                style="width: 100%; margin-bottom: 10px"
                placeholder="请输入节点名称"
            />
            <el-scrollbar :style="{ height: hHeight - 266 + 'px' }">
                <el-tree
                    ref="treeRef"
                    style="max-width: 600px"
                    :data="dataSource"
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false"
                    class="filter-tree"
                    :props="defaultProps"
                    :filter-node-method="filterNode"
                    :highlight-current="true"
                    :style="{ height: hHeight - 266 + 'px' }"
                >
                    <template #default="{ node, data }">
                        <span
                            class="custom-tree-node"
                            @click="handleDepNode('detailNode', node, data)"
                        >
                            <span style="display: inline-block">{{
                                node.label
                            }}</span>
                            <span class="options">
                                <el-icon
                                    class="elIcon"
                                    :size="16"
                                    @click.stop="
                                        handleDepNode('addNode', node, data)
                                    "
                                >
                                    <Plus />
                                </el-icon>
                                <el-icon
                                    v-if="data.isComp !== 1"
                                    class="elIcon"
                                    :size="16"
                                    @click.stop="
                                        handleDepNode('editNode', node, data)
                                    "
                                >
                                    <Edit />
                                </el-icon>
                                <el-icon
                                    v-if="data.isComp !== 1"
                                    class="elIcon"
                                    :size="16"
                                    @click.stop="
                                        handleDepNode('deleteNode', node, data)
                                    "
                                >
                                    <Delete />
                                </el-icon>
                            </span>
                        </span>
                    </template>
                </el-tree>
            </el-scrollbar>
            <el-button
                type="primary"
                style="width: 100%; margin-top: 15px"
                @click="handleDepNode('add')"
                ><el-icon class="elIcon" :size="16" color="#fff">
                    <Plus />
                </el-icon>
                新增节点/子节点
            </el-button>
        </div>
        <div class="treeRight treeItem" style="width: 75%">
            <div class="menuOperationTitle">
                <p></p>
                <div class="titleName">
                    菜单操作区
                    <span>（根据左侧指令进行操作）</span>
                </div>
            </div>
            <el-tabs
                v-show="detailTypeProps !== ''"
                v-model="activeTreeNode"
                type="card"
                class="demo-tabs"
                @tab-click="handleClick"
            >
                <el-tab-pane label="组织管理" name="detail">
                    <Detail
                        :ruleFormProps="depProps"
                        :type="detailTypeProps"
                        @updateDep="updateDep"
                    ></Detail>
                </el-tab-pane>
                <el-tab-pane label="关联权责" name="role">
                    <Role
                        :ruleFormProps="depProps"
                        :type="detailTypeProps"
                        @updateDep="updateDep"
                    ></Role>
                </el-tab-pane>
                <el-tab-pane label="关联账号" name="user">
                    <User
                        :ruleFormProps="depProps"
                        :type="detailTypeProps"
                        @updateDep="updateDep"
                    ></User>
                </el-tab-pane>
            </el-tabs>

            <div class="emptyBox" v-show="detailTypeProps == ''">
                <el-empty
                    class="emptyNodata"
                    description="暂无数据"
                    v-show="true"
                    :image-size="60"
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted, watch } from "vue";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import Detail from "./components/detail.vue";
import Role from "./components/role.vue";
import User from "./components/user.vue";
import schedulingHttp from "@/https/scheduling.js";
import userHttp from "@/https/user.js";
import { ElMessage, ElMessageBox } from "element-plus";

const activeTreeNode = ref("detail");
const handleClick = () => {};
const filterText = ref("");
const treeRef = ref();
const dataSource = ref([]);
const defaultProps = {
    children: "depVOS",
    label: "depName",
};

watch(filterText, (val) => {
    treeRef.value.filter(val);
});
const filterNode = (value, data) => {
    if (!value) return true;
    return data.depName.includes(value);
};
const search = async () => {
    const res = await userHttp.depGetDeps();
    if (res.data.code === 200) {
        res.data.data;
        dataSource.value[0] = res.data.data;
    }
};
const depProps = reactive({
    id: "",
    depCode: "",
    depName: "",
    parentCode: "",
    parentName: "",
    isComp: "",
    sorts: 0,
    comment: "",
});
const detailTypeProps = ref("");
const handleDepNode = async (type, node, data) => {
    activeTreeNode.value = "detail";
    detailTypeProps.value = type;
    depProps.id = "";
    depProps.depCode = "";
    depProps.depName = "";
    depProps.parentCode = "";
    depProps.parentName = "";
    depProps.isComp = "";
    depProps.sorts = 0;
    depProps.comment = "";
    if (type == "add") {
    } else if (type == "addNode") {
        console.log(node, data);
        depProps.parentCode = data.depCode;
        depProps.parentName = data.depName;
    } else if (type == "editNode" || type == "detailNode") {
        console.log(data.isComp);
        depProps.id = data.id;
        depProps.depCode = data.depCode;
        depProps.depName = data.depName;
        depProps.parentCode = data.parentCode;
        depProps.parentName = data.parentName;
        depProps.isComp = data.isComp;
        depProps.sorts = data.sorts;
        depProps.comment = data.comment;
    } else if (type == "deleteNode") {
        depProps.id = data.id;
        depProps.depCode = data.depCode;
        depProps.depName = data.depName;
        depProps.parentCode = data.parentCode;
        depProps.parentName = data.parentName;
        depProps.sorts = data.sorts;
        depProps.comment = data.comment;
        ElMessageBox.confirm(`确认组织节点${depProps.depName}吗？`, `删除`, {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            userHttp.deplDelDep(depProps).then((res) => {
                if (res.data.code === 200) {
                    detailTypeProps.value = "";
                    search();
                }
            });
        });
    }
};
const updateDep = () => {
    ElMessage({
        type: "success",
        message:
            detailTypeProps.value == "add" || detailTypeProps.value == "addNode"
                ? "新增成功"
                : "更新成功",
    });
    detailTypeProps.value = "";
    search();
};
const hHeight = ref(0);
onMounted(() => {
    nextTick(() => {
        hHeight.value = document.documentElement.clientHeight;
    });
    search();
});
</script>
<style lang="less" scoped>
.treeBox {
    display: flex;
    flex-direction: row;
    .treeLeft {
        border-right: 1px solid #ddd;
    }
    .treeItem {
        min-height: 300px;
        padding: 20px;
        box-sizing: border-box;
    }
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    .options {
        display: none;
        .elIcon {
            color: #606266;
            margin-right: 2px;
        }
    }
    &:hover .options {
        display: block;
    }
}
.menuOperationTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #777;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    margin-bottom: 20px;
    p {
        width: 4px;
        height: 16px;
        background: #409ffc;
    }
    .titleName {
        font-size: 14px;
        margin-left: 10px;
        span {
            font-size: 12px;
        }
    }
}
</style>